<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>{% if goods.goods_name == '' %}派乐熊{% else %} {{goods.goods_name}} {%endif%}</title>
	<link rel="stylesheet" href="/static/product/css/ui_box.css" />
	<link rel="stylesheet" href="/static/product/css/plx_main.css" />
	<link rel="stylesheet" href="/static/product/css/swiper-3.4.2.min.css" />
	<link rel="stylesheet" href="/static/product/css/photoswipe.css" />
	<link rel="stylesheet" href="/static/product/css/default-skin.css" />
	<link rel="stylesheet" href="/static/common/css/mescroll.min.css" />
	<style>
		.mescroll {
			height: 100% !important;
			width: 100% !important;
			padding-bottom: 44px !important;
		}
		#Details{
		    font-size: 0.8rem;
		    color: #505050;
		    letter-spacing: -0.09px;
		    line-height: 1.5rem;
		    margin-top: 1.2rem;
		}
		[v-cloak] {
		    display: none !important;
		}
		.loading{
			width: 100%;
			height:100%;
			background-color: rgba(0,0,0,0.5);
			z-index: 999999;
			text-align: center;
			padding-top: 17rem;
			position: absolute;
			top:0;
			left:0;
		}
	</style>
</head>
<body>
	<div class="loading">加载中......</div>
	<!--header-->
	<!--<header id="header" class="ub ub-ac ub-pc sc-bg1 border-b">
		<div class="arrow-left ub-img"></div>
		<p class="ulev1 text-color1 tx-c">商品详情</p>
		<img class="collection" src="/static/product/img/collection-gray.png" />
		<img class="share" src="/static/product/img/share.png" />
	</header>-->
	<!--内容部分-->
	<div id="content">
		<!--轮播图-->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<div id="vue" v-cloak>
			<div class="umar-a">
				<p class="details">[goods_name]</p>
				<p class="price"><span>¥</span><span id="sale_price">[sale_price]</span>
					<del>¥</del>
					<del id="goods_price">[goods_price]</del>
				</p>
			</div>
			<div class="dividingline"></div>
			<p class="description" >[goods_desc]</p>
			<div style='display:none'  id='description'>{{goods.goods_desc}}</div>
			<div class="dividingline"></div>
			<div class="umar-a">
				<p class="storename">[store_name]</p>
				<div class="ub ub-ac address">
					<div>
						<img class="circle" src="/static/product/img/circle.png" />
					</div>
					<p class="ub-f1">[store_address]</p>
					<span class="ub-f1">[distance]</span>
				</div>
				<div class="ub ub-ac address">
					<div>
						<img class="phone" src="/static/product/img/phone.png" />
					</div>
					<p onclick='tel_store(this)'>[store_tel]</p>
				</div>
			</div>
			<div class="dividingline"></div>
		</div>
		<div class="ub ub-pc ub-ac tab" id="tab">
			<p class="on">活动详情</p>
			<p>购买须知</p>
			<p>商户介绍</p>
		</div>
		<div id="box" style="height:4rem;display: none;"></div>
    	<!--活动详情-->
		<div id="xiangqing" style="display: none;">
			<div id="Details" class="umar-a" v-html="store_detail" v-cloak>
				[store_detail]
			</div>
		</div>
		<!--购买须知-->
		<div id="xuzhi" style="display: none;" v-cloak>
			<p>有效期</p>
			<p>[yxq]</p>
			<p>使用时间</p>
			<p>[sysj]</p>
			<p>预约信息</p>
			<p>[yyxx]</p>
			<p>适用人数</p>
			<p>[syrs]</p>
			<p>温馨提示</p>
			<p>[wxts]</p>
		</div>
		<!--商户介绍-->
		<div id="shanghu" style="display: none;" v-cloak>
			<div class="ub ub-fh">
				<img class="logo" :src="store_img" />
				<div class="ub-f1 ub ub-ver tiyan">
					<p>[store_name]</p>
					<!--<p>以游泳比赛、游泳水中运动、游泳培训的方式来提高社会各界人士对体育的热爱。</p>-->
				</div>
			</div>
			<div class="directions" v-html="store_info">
				[store_info]
			</div>
		</div>
		<!--评论-->
		<div id="shComment" class="mescroll">
			<div class="bg-blue"></div>
			<div class="ub ub-ac comment">
				<p>评论</p>
				<!--<p>98条评论</p>-->
			</div>
			<div class="dividingline"></div>
			<!--<div class="comments-list" id="comments-list">

			</div>-->
			<div class="comment-wrap" id="dataList" v-cloak>
				<div class="ub umar-t" v-for="(item,index) of commentList">
					<!--<img class="portrait" :src='item.avatar?item.avatar:'/'" />-->
					<img class="portrait" :src="item.avatar?item.avatar:'/'" />
					<div class="ub-f1 ub ub-ver discuss">
						<p>[item.user_name]</p>
						<p>[item.utime]</p>
						<p>[item.content]</p>
						<div class="ub uppic" v-for="url of item.img_url">
							<img :src="url" @click='addAtLast(index)'/>
						</div>
						<div class="ub ub-ac praise">
							<!-- <img src="img/preview.png" />
							<p>12387</p> -->
							<img class="praise_off" :src="[item.iszan]" v-bind:attrid='item.id' onclick='praise_click(this)'/>
							<p class="amounts">[item.zan]</p>
						</div>
					</div>
				</div>
			</div>
			<div style="height:2rem"></div>
		</div>
	</div>
	<!--点击图片预览放大效果-->
	<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="pswp__bg"></div>
		<div class="pswp__scroll-wrap">
			<div class="pswp__container">
				<div class="pswp__item"></div>
				<div class="pswp__item"></div>
				<div class="pswp__item"></div>
			</div>
			<div class="pswp__ui pswp__ui--hidden">
				<div class="pswp__top-bar">
					<div class="pswp__counter"></div>
					<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
					<button class="pswp__button pswp__button--share" title="Share"></button>
					<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
					<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
					<div class="pswp__preloader">
						<div class="pswp__preloader__icn">
							<div class="pswp__preloader__cut">
								<div class="pswp__preloader__donut"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
					<div class="pswp__share-tooltip"></div>
				</div>
				<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
		            </button>
				<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
		            </button>
				<div class="pswp__caption">
					<div class="pswp__caption__center"></div>
				</div>
			</div>
		</div>
	</div>
	{% if show == '1' %}
	<footer id="pay">
		<p>立即购买</p>
	</footer>
	{%endif%}
</body>
<script type="text/javascript" src="/static/common/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/static/product/js/swiper-3.4.2.min.js"></script>
<script type="text/javascript" src="/static/product/js/photoswipe-ui-default.min.js"></script>
<script type="text/javascript" src="/static/product/js/photoswipe.min.js"></script>
<script type="text/javascript" src="/static/common/js/mescroll.min.js"></script>
<script type="text/javascript" src="/static/common/js/vue.js"></script>
<script type="text/javascript" src="/static/common/js/jockey.min.js"></script>
<script type="text/javascript" src="/static/common/js/public.js"></script>
<script>
	var gid = {{gid}};
	var lat = {{lat}};
	var lon = {{lon}};
	var gname = '';
	var gsale_price = ''; 
	(function () {
		// 接口
		var Api = {
			base: 'https://clubbear.clubbear.cn',
			riji: '/diary/GetLeftComment',
			rijiList: '/diary/GetRecomDiary',
			detail:'/goods/GetGoodsComment?gid='+gid+'&page=3&num=2'
		}
		// 获取详情评论数据
		function getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
			$.ajax({
				url: Api.base + Api.detail,
				data: {
					period: 1,
					page: pageNum,
					num: pageSize
				},
				type: 'post',
				dataType: 'json',
				success: function (res) {
					successCallback && successCallback(res.data)
				},
				error: function (xhr, state, err) {
					if (errorCallback) {
						errorCallback(err)
					} else {
						console.log('获取数据失败', err)
					}
				}
			})
		}
		//创建vue对象
		var vm = new Vue({
			el: "#dataList",
			delimiters: ['[', ']'],
			data: {
				mescroll: null,
				commentList: []
			},
			mounted: function() {
				//创建MeScroll对象,down可以不用配置,因为内部已默认开启下拉刷新,重置列表数据为第一页
				//解析: 下拉回调默认调用mescroll.resetUpScroll(); 而resetUpScroll会将page.num=1,再执行up.callback,从而实现刷新列表数据为第一页;
				var self = this;
				self.mescroll = new MeScroll("shComment", {
					up: {
						callback: self.upCallback,
						loadFull: { 
						  use : true , 
						  delay : 500 
						},
						page: {
							size: 5
						}
					},
					// 锁定上拉恢复
					down: {
						isLock: true
					}
				});
				
				//初始化vue后,显示vue模板布局
				document.getElementById("dataList").style.display="block";
			},
			methods: {
				//上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
				upCallback: function(page) {
					console.log("page.num=="+page.num+", page.size=="+page.size);
					//联网加载数据
					var self = this;
					getListDataFromNet(page.num, page.size, function(data) {
						//data=[]; //打开本行注释,可演示列表无任何数据empty的配置
						
						//如果是第一页需手动制空列表
						if(page.num == 1) self.commentList = [];
						
						//更新列表数据
						self.commentList = self.commentList.concat(data);
						console.log("self.commentList.length==" + self.commentList.length);
						
						//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
						//传参:数据的总数; mescroll会自动判断列表是否有无下一页数据,如果数据不满一页则提示无更多数据;
						self.mescroll.endSuccess(data.length);
						
					}, function() {
						//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
						self.mescroll.endErr();
					});
				},
//				addAtLast(indexx){
//					var imgsrc=this.commentList[indexx].img_url;
//		            openPhotoSwipe(imgsrc);
//				}
			},
		});
		
		//轮播图
		$(document).ready(function () {
			$("#xiangqing").show();
			$(".loading").show();
		});
		//从后台读取数据
		$.ajax({
			type: "post",
			url: "https://clubbear.clubbear.cn/goods/goodsDetail?gid="+gid+"&lat="+ lat + "&lnt=" + lon,
			dataType: "json",
			success: function (data) {
				console.log(data)
				//var imgurl = data.data.img[0].imgurl;
				var goods_name = data.data.info.goods_name;
				gname = goods_name;
				var goods_price = data.data.info.goods_price;
				var sale_price = data.data.info.sale_price;
				var goods_desc = data.data.info.goods_desc;
				gsale_price = sale_price;
				var store_address = data.data.store.store_address;
				var store_name = data.data.store.store_name;
				var store_info = data.data.store.store_info;
				var store_tel = data.data.store.store_tel;
				var distance = data.data.store.distance;
				var store_img = data.data.store.store_img;
				var introduce = data.data.affiliate.introduce;
				var detail = data.data.affiliate.detail;
				var yxq = data.data.affiliate.xuzhi.yxq;
				var sysj = data.data.affiliate.xuzhi.sysj;
				var yyxx = data.data.affiliate.xuzhi.yyxx;
				var syrs = data.data.affiliate.xuzhi.syrs;
				var wxts = data.data.affiliate.xuzhi.wxts;
				//如果不返回有效期，则有效期就不显示
				if(yxq==null || yxq=='' || yxq== undefined){
					$("#xuzhi p").eq(0).hide();
					$("#xuzhi p").eq(1).hide();
				}
				for (var i = 0; i < data.data.img.length; i++) {
					var html1 = '<div class="swiper-slide"><img class="banner" src="'
					var html2 = data.data.img[i]
					var html3 = '" /></div>'
					var html4 = html1 + html2 + html3
					$(".swiper-wrapper").append(html4)
				}
				var mySwiper = new Swiper('.swiper-container', {
					direction: 'horizontal',
					autoplay: 3000,
					pagination: '.swiper-pagination',
					loop: true,
				});
				var app = new Vue({
					el: '#vue',
					delimiters: ['[', ']'],
					data: {
						//imgurl: imgurl,
						goods_name: goods_name,
						goods_desc: goods_desc,
						goods_price: goods_price,
						sale_price: sale_price,
						store_address: store_address,
						store_name: store_name,
						store_tel: store_tel,
						distance: distance,
					},
				})
				var app = new Vue({
					el: '#Details',
					delimiters: ['[', ']'],
					data: {
						store_detail: detail
					},
				})
				var app = new Vue({
					el: '#xuzhi',
					delimiters: ['[', ']'],
					data: {
						yxq: yxq,
						sysj: sysj,
						yyxx: yyxx,
						syrs: syrs,
						wxts: wxts,
					},
				})
				var app = new Vue({
					el: '#shanghu',
					delimiters: ['[', ']'],
					data: {
						introduce: introduce,
						store_name: store_name,
						store_img: store_img,
						store_info: store_info,
					},
				})
				$(".loading").hide();
				var oDiv = document.getElementById('tab');
				var divT = oDiv.offsetTop;
				window.onscroll = function () {
					var scrollT = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
					console.log(divT)
					console.log(scrollT)
					if (scrollT >= divT) {
						$("#tab").addClass("fixed");
						$(".tab p").css("margin-top", "0rem");
						$(".tab p").click(function () {
							var index = $(this).index();
							$(this).addClass("on").siblings().removeClass("on");
							if (index == 0) {
								$("#xiangqing").show();
								$("#xuzhi").hide();
								$("#shanghu").hide();
								$("#box").show();
						    	var box = document.getElementById("box").scrollIntoView(true);
							} else if (index == 1) {
								$("#xuzhi").show();
								$("#xiangqing").hide();
								$("#shanghu").hide();
								$("#box").show();
						    	var box = document.getElementById("box").scrollIntoView(true);
							} else if (index == 2) {
								$("#shanghu").show();
								$("#xuzhi").hide();
								$("#xiangqing").hide();
								$("#box").show();
						    	var box = document.getElementById("box").scrollIntoView(true);
							} else {
				
							}
						});
	
					} else {
						$("#tab").removeClass("fixed");
						$(".tab p").css("margin-top", "1.2rem")
						$("#box").hide()
					}
				}
			},
			error: function (data) {
				alert("数据加载失败")
			}
			
		});

		//tab栏切换
		$(".tab p").click(function () {
			var index = $(this).index();
			$(this).addClass("on").siblings().removeClass("on");
			if (index == 0) {
				$("#xiangqing").show();
				$("#xuzhi").hide();
				$("#shanghu").hide();
			} else if (index == 1) {
				$("#xuzhi").show();
				$("#xiangqing").hide();
				$("#shanghu").hide();
			} else if (index == 2) {
				$("#shanghu").show();
				$("#xuzhi").hide();
				$("#xiangqing").hide();
			} else {

			}
		});
		
		//点击收藏效果
		$(".collection").click(function () {
			if ($(this).attr("src").match("collection-gray.png")) {
				$(this).attr("src", "img/collection.png");
				$.ajax({
					type: "post",
					url: "https://clubbear.clubbear.cn/collect/SetCollect?type=1&cid=3",
					dataType: "json",
					success: function (data) {
						console.log(data)
					}
				});
			} else {
				$(this).attr("src", "/static/product/img/collection-gray.png")
			}
		})
		
			
		
	})()
</script>
<script>
	var openPhotoSwipe = function (imgsrc) {
		var pswpElement = document.querySelectorAll('.pswp')[0];
		var items = [ ];
		for(var i=0;i<imgsrc.length;i++){
			items.push({src: imgsrc[i],w: 1024,h: 750}); 
		}
		var options = {
			history: false,
			focus: false,
			tapToClose: true, //默认关闭
			showAnimationDuration: 0,
			hideAnimationDuration: 0
		};
		var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
		gallery.init();
	};
	
	$('#pay').on('click',function(){
		//alert(gid+',goodName:'+gname+',sale_price:'+gsale_price)
		if( PUBCOMMON.browserEnv.isInWeixin() ){
			if( PUBCOMMON.browserEnv.isInAndroid() ){
			
				window.location.href = 'http://app.mi.com/details?id=com.clubbear.paile&ref=search';
			}else{
				window.location.href = 'https://itunes.apple.com/gb/app/pai-le-xiong/id1294951586?mt=8';
			}
		}else{
			Jockey.send("pailexiong", {key: 'buy', data: {'gid':gid.toString(),'goodName':gname,'sale_price':gsale_price}});
		}
	})
	function tel_store(obj){
		//alert($(obj).text().replace(/(^\s*)|(\s*$)/g, "") + '123')
		Jockey.send("pailexiong", {key: 'phone', data: $(obj).text().replace(/(^\s*)|(\s*$)/g, "")});
	}	
	
	//点赞
	function praise_click(obj){
		if( loginCall() ){
			var attrid = $(obj).attr('attrid');
			$.ajax({
				url:'/order/SetOrderCommonPra',
				type:'post',
				data:{praiseId:attrid},
				dataType: "json",
				success:function( data ){
					if( data.code == 0 ){
						if( data.data.show == 1 ){
							//点中
							$(obj).attr("src",'/static/product/img/praise_on.png').siblings('p').text( parseInt( $(obj).siblings('p').text() ) + 1  );
						}else{
							//取消
							$(obj).attr("src",'/static/product/img/praise_off.png').siblings('p').text( parseInt( $(obj).siblings('p').text() - 1 ) );
						}
					}else if( data.code == 10001 ){
						loginCallTwo();
					}
				}
			})
		}
	}
</script>

</html>
